iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
Mobile Development

iOS Developer Learning Android系列 第 9

iOS Developer Learning Android. Lesson 09 - ConstraintLayout (安卓版的AutoLayout揪淨還多了哪些東西?)

  • 分享至 

  • xImage
  •  

昨天我們了解到一些ConstraintLayout的基本常見使用姿勢
今天我們繼續介紹一些ConstraintLayout比以前AutoLayout多出來的東西(所以會看到一直噴⚠️)

輔助工具

  1. Guideline
    可以隨意拉出多條垂直或水平的Guideline(可以固定距離或依比例),做為約束參考之用,可以想成拍照時的輔助線,感覺滿好用的⚠️⚠️⚠️Xcode無
  2. Barrier
    看了幾篇資料還是不太能掌握,之後理解了再回來補充。永別了
  3. Group
    加入後,畫布看不到,但左下元件樹會多個Group,可以把元件拉到這個Group下,之後就可以對這個Group做設定。
    例如設成invisble的話,就會多個元件一起invisble。(好像就沒其他作用了,也不能變顏色之類的= =)

Chain

就是把多個元件水平或垂直串起來後,可以快速改變Chain的類型。⚠️⚠️⚠️Xcode無
不知道為什麼看到這個我就想到...

好,不要理我,繼續!

要把多個元件鏈結起來的方法也很簡單,先用⌘多選元件,然後右鍵>Chains>水平或垂直,就可以了。
鏈完之後,隨便一個元件上按右鍵>Cycle Chain mode,就可以改變鏈的類型了。(這邊我看有一些網路上資料可以有個浮動按鈕,但不知道為什麼我的AS沒有,知道原因的麻煩分享一下)

類型介紹如下:

(from android doc website)
有三種基本的類型是

  1. Spread:平均分佈
  2. Spread inside:去頭尾後平均分佈
  3. Packed:靠緊置中

另外,Packed之後隨便對其中一個元件Bias就變成了Packed with Bias,而Weighted則是先把width改成0dp,然後用app:layout_constraintHorizontal_weight去設比重。

實作如下:

gone

  1. Android在控制元件的顯示上,是用android:visibility這個屬性,與iOS不同的是:⚠️⚠️⚠️不是只有visible/invisible而已,還有一個gone。
    gone就是不顯示了,而且位置也被其他元件替補了;而invisible是不顯示而且位置還留著。
  2. ConstraintLayout有個goneMargin系列的屬性~就是參考的對象gone了,要留多少邊距。
    請看左上角兩個按鈕的示範:
    1. 還沒gone之前,左邊元件跟右邊元件距離42
    2. 如果左邊gone了之後,右邊元件就離邊界42
    3. 但若有設定layout_goneMarginStart="16dp",雖然原本間距是42,但此時距離邊界就會變成16

Baseline

就是文字的底線(元件上右鍵>shpw baseline),可以讓你的文字對齊其他元件的文字底線(但是我覺得藍色的文字應該在第四行才對...這樣感覺好怪)。

CircleAngle

這功能也是很神奇⚠️⚠️⚠️,可以設定B元件在A元件的幾度角,距離多遠。

(from android doc website)

閃退

情境是我想說已經有設定高度跟比例了,就在XML裡把寬度刪掉,結果build得過但卻閃退,所以還是要看一下畫布區右上角有沒有紅色驚嘆號!

參考資料

今天的範例程式

可以去 https://github.com/mark33699/IDLA 看一下順便給顆⭐️


如果你喜歡我的影片別忘了按讚分享加訂閱,開啟紅色的小鈴鐺,我們明天見~


上一篇
iOS Developer Learning Android. Lesson 08 - ConstraintLayout (運用AutoLayout的思維安排Android畫面)
下一篇
iOS Developer Learning Android. Lesson 10 - TextView + EditText (不用寫code就可做到跑馬燈跟UITextView自動長高)
系列文
iOS Developer Learning Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言